<template>
    <div class="footer">
        <div
            v-for='(item,index) of items'
            :class='[item.cls,{on:index === idx}]'
            :key="index"
            @click="click(index)"
        >

            <img :src="index===idx?item.iconSelect:item.icon" />
            <p :class="index===idx?'footerThis':''">{{item.name}}</p>
        </div>
    </div>
</template>
<script>
export default {
    name: "Fonter",
    props: ['idx'],
    data() {
        return {
            items: [
                {
                    name: "优惠券",
                    push: "/coupon",
                    icon: require("../asset/icon/icon_bottom_home.png"),
                    iconSelect: require("../asset/icon/icon_bottom_home_select.png"),
                }, {
                    name: "赚赏金",
                    push: "/home",
                    icon: require("../asset/icon/icon_bottom_coupon.png"),
                    iconSelect: require("../asset/icon/icon_bottom_coupon_select.png"),
                },

                {
                    name: "消息",
                    push: "/news",
                    icon: require("../asset/icon/icon_bottom_news.png"),
                    iconSelect: require("../asset/icon/icon_bottom_news_select.png"),
                },
                {
                    name: "我的",
                    push: "/mine",
                    icon: require("../asset/icon/icon_bottom_mine.png"),
                    iconSelect: require("../asset/icon/icon_bottom_mine_select.png"),
                }]
        };
    },
    methods: {
        // 方法
        click(index) {
            this.$router.push(this.items[index].push)
        }

    },
    created() {
        // 实例创建完成
    },
};
</script>
<style lang="less" scoped>
.footer {
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    height: 45px;
    background: #f0effe;
    width: 100%;
    border-top: 1px solid #cec8ff;
    z-index: 10;
    > div {
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
            display: block;
            width: 20px;
        }
        > p {
            font-size: 12px;
            color: #9b94dc;
        }
        .footerThis {
            color: #525cff;
        }
    }
}
</style>